<template>
  <div class="article-list" @scroll="scroll" ref="articleList">
    <!-- 我是文章列表页 -{{ channel }} -->
    <!--
        1.van-list 自带上拉加载 和 下拉刷新的功能
        2.原理：
          (1) 数据项在list中
          (2) 在显示数据时，如果当前数据内容不够一屏幕，会自动调用onload方法
               - 在onload中，需要通过ajax取回数据，添加到list中
               - 加载完，需要将loading手动设置为false
               - 判断是否所有的数据都已经加载完成，如果是，将finish的改成true
          (3) 如果是往上滑动，且finished不为true，一旦快要触底，也会自动调用onload
     -->
    <van-pull-refresh v-model='isRefreshing' @refresh='onRefresh'>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad">

        <van-cell
        @click="$router.push('/article/' + item.art_id.toString())"
          v-for="item in list"
          :key="item.art_id.toString()"
          :title="item.title">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #label>
            <van-grid :column-num="item.cover.images.length">
              <van-grid-item v-for="(img,index) in item.cover.images" :key="index">
                <van-image width="5rem" height="5rem" fit="cover" :src="img" lazy-load />
              </van-grid-item>
            </van-grid>

            <div class="meta">
              <span>{{item.aut_name}}</span>
              <span>{{item.comm_count}}评论</span>
              <span>{{item.pubdate | relative}}</span>
              <div class="closeBtn">
                <van-icon name="close" @click="show(item)"/>
              </div>
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { reqGetArticles } from '@/api/article.js'
export default {
  name: 'ArticleList',
  props: ['channel'],
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      timestamp: null,
      isRefreshing: false, // 是否下拉刷新中
      scrollTop: 0 // 记录当前articleList组件卷曲的高度
    }
  },
  created () {
    // 事件总线，删除文章
    this.$eventBus.$on('del-article', obj => {
      // console.log(obj)
      const { articleId, channelId } = obj
      if (channelId !== this.channel.id) {
        console.log('与我无关')
      }
      // 删除文章
      this.list = this.list.filter(item => item.art_id.toString() !== articleId)
    })
  },
  activated () {
    console.log('激活了')
    // 回复滚动距离
    this.$refs.articleList.scrollTop = this.scrollTop
  },
  methods: {
    // 上滑加载
    //   onload什么时候触发
    // (1) 一进入页面，发现数据不够，就会触发
    // (2) 往上滑动，滑动到底部时，自动触发
    async onLoad () {
      // console.log('上滑加载了')
      if (!this.timestamp) {
        // 默认当前时间，表示拉去最新的数据
        this.timestamp = +new Date()
      }
      //   1.发送请求获取数据
      const res = await reqGetArticles(this.channel.id, this.timestamp)
      // console.log(res.data)
      // 保存时间戳，以便下一次存入
      this.timestamp = res.data.data.pre_timestamp

      //   2.将数据追加原有的数据的后面
      const arr = res.data.data.results
      this.list = [...this.list, ...arr]

      //   3.如果数据加载完成，手动将loading值，改成false
      this.loading = false

      //   4.如果数据全部加载完了，没了，将finished，改成true
      if (arr.length === 0) {
        this.finished = true
      }
    },
    // 下拉刷新
    async onRefresh () {
      // console.log('下拉刷新了')
      // 1.取回最新的文章(要传入最新的时间戳)
      const res = await reqGetArticles(this.channel.id, +new Date())
      // console.log(res.data)
      // 2.将数据覆盖到list中
      this.list = res.data.data.results
      // 3.更新时间戳
      this.timestamp = res.data.data.pre_timestamp
      // 4.提示更新结果
      this.$toast.success('刷新成功')
      // 5.结束刷新状态
      this.isRefreshing = false
      // 再调用下onload，防止触发数据不满一屏，不触发onload事件
      this.onLoad()
    },
    show (item) {
      this.$emit('show-more', item.art_id.toString())
    },
    // 记录页面卷曲高度
    scroll (e) {
      // 将已经滚动的距离，记录到this.scrollTop中
      this.scrollTop = e.target.scrollTop
      // console.log(e, '页面滚动了')
    }
  }
}
</script>

<style lang="scss" scoped>
.article-list {
  height: 100%;
  overflow: auto;
  ::v-deep .van-list {
    padding-bottom: 100px;
  }
  .meta {
    width: 100%;
    span {
      margin-right: 10px;
    }
    .right-icon {
      float: right;
      margin-top: 3px;
      margin-right: 3px;
    }
  }
}
</style>
